<template>
  <!--pages/login/verifyLogin/index.wxml-->
  <view class="login_box">
    <view class="tabbar">
      <mineNavbar :styleData="styleData"></mineNavbar>
    </view>
    <view class="top">
      <image src="http://sb9sps5gr.hn-bkt.clouddn.com/bgImg.png" />
      <!-- <tabbarTop class="tabbarTop"></tabbarTop> -->
      <view class="middle">
        <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/10/a51db8a444b94f97b960f747d6fcd145.png" />
        <text>零工就业招聘驿站</text>
      </view>
    </view>
    <view class="verify">
      <view class="v_input">
        <view>
          <image src="@/static/images/recruit/user.png" />
          <input type="text" v-model="phonenumber" placeholder="请输入手机号码" maxlength="11" />
        </view>
        <view>
          <image src="@/static/images/recruit/user1.png" />
          <input type="text" v-model="smsCode" placeholder="请输入短信验证码" />
          <view @click="getCode" v-if="isshowSeconds">获取验证码</view>
          <view v-else>{{ seconds }}s重新获取</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="b_login">
        <button :class="!isAgree ? 'first' : 'argee'" :disabled="isAgree" @click="goSelectStores">
          立即登陆
        </button>
        <view class="secent" @click="verifyLogin">微信授权登陆</view>
      </view>
      <view class="b_agreement">
        <image src="@/static/images/recruit/single-choice-unsele.png" v-if="isAgree" @click="changeIcon" />
        <image src="@/static/images/recruit/single-choice-unsele1.png" v-else @click="changeIcon" />
        <view>
          <text class="t_one">我已阅读并同意</text>
          <text class="t_two" @click="handleToUserAgreement">《用户协议》</text>
          <text class="t_three" @click="handleToPrivacy">《隐私政策》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { captchaSms, smsLogin } from "@/api/login.js";
import { mapState } from "vuex";
import { verifyMobile } from '@/utils/toast'

export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
      },
      seconds: 60,
      isshowSeconds: true,
      isAgree: true,

      phonenumber: "",
      smsCode: "",
      // userType: "2",
    };
  },
  computed: { ...mapState(["userType"]) },
  watch: {},
  async onLoad(options) {
    console.log(this.userType, "this.userType");
  },
  async onShow() {
  },
  onReady() {
  },
  methods: {
    // 重新获取验证码
    getCode() {
      if (verifyMobile(this.phonenumber)) {
        this.getCaptchaSms();
      }
    },
    getCaptchaSms() {
      let phonenumber = this.phonenumber;
      captchaSms({
        phonenumber,
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          let timer = ''
          this.isshowSeconds = false;
          var that = this;
          timer = setInterval(() => {
            that.seconds = that.seconds - 1;
            if (that.seconds === 0) {
              clearInterval(timer);
              (that.isshowSeconds = true), (that.seconds = 60);
            }
          }, 1000);
          this.smsCode = res.data;
          uni.showToast({
            title: "验证码已发送！",
            icon: "none",
          });
        }
      });
    },
    // 跳转用户协议
    handleToUserAgreement() {
      uni.navigateTo({
        url: "/subPage/enterprise/mine/details/userAgreement?type=1",
      });
    },
    // 跳转隐私协议
    handleToPrivacy() {
      uni.navigateTo({
        url: "/subPage/enterprise/mine/details/privacy?type=2",
      });
    },
    // 立即登陆
    goSelectStores() {
      let that = this;
      uni.login({
        provider: "weixin", //使用微信登录
        success: function (res) {
          let params = {
            phonenumber: that.phonenumber,
            smsCode: that.smsCode,
            userType: that.userType,
            xcxCode: res.code,
          };
          that.$store.dispatch("Login", params).then(() => {
            that.loginSuccess();
          });
        },
      });
    },
    // 登录成功后，处理函数
    loginSuccess() {
      this.$store.dispatch("GetInfo");
    },
    // 微信授权
    verifyLogin() {
      uni.navigateTo({
        url: "/pages/recruit/login/index",
      });
    },
    changeIcon() {
      this.isAgree = !this.isAgree;
    },
  },
};
</script>
<style lang="scss" scoped>
/* pages/login/verifyLogin/index.wxss */
.login_box {
  position: absolute;
  top: 0;
  left: 0;

  .tabbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .top {
    width: 750rpx;
    height: 754rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .tabbarTop {
      position: absolute;
      top: 0;
      left: 0;
    }

    .middle {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 232rpx;
        height: 232rpx;
      }

      >text {
        margin-top: 10px;
        font-size: 28rpx;
      }
    }
  }

  .verify {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 646rpx;
    left: 0;

    .v_input {
      width: 562rpx;

      >view {
        height: 106rpx;
        background: #ffffff;
        border: 1px solid #e2e2e2;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        margin-bottom: 24rpx;

        image {
          width: 28rpx;
          height: 32rpx;
          padding: 0 10px;
        }

        >view {
          color: #317ed0;
        }
      }
    }
  }

  .bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 950rpx;
    left: 0;

    .b_login {
      .first {
        width: 420rpx;
        height: 98rpx;
        background: #ff9e24;
        border-radius: 49rpx;
        text-align: center;
        line-height: 98rpx;
        color: #fff;
        font-weight: 500;
        font-size: 32rpx;
      }

      .argee {
        width: 420rpx;
        height: 98rpx;
        background: #ffdeb4;
        border-radius: 49rpx;
        text-align: center;
        line-height: 98rpx;
        color: #fff;
        font-weight: 500;
        font-size: 32rpx;
      }

      .secent {
        width: 420rpx;
        height: 45rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 32rpx;
        color: #000000a3;
        letter-spacing: 0;
        text-align: center;
        margin-top: 20px;
      }
    }

    .b_agreement {
      display: flex;
      align-items: center;
      margin-top: 100rpx;

      image {
        width: 14px;
        height: 14px;
      }

      >view {
        margin-left: 5px;
        color: #317ed0;
        font-size: 24rpx;

        .t_one {
          color: #000000a3;
        }
      }
    }
  }
}
</style>
